<template>
	<view class="container">
		<goods page="mall" :goodsList="goodsList"></goods>
		<emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-if="goodsList.length == 0"></emptyData>
		
		<!-- 悬浮购物车 -->
		<view class="cartBox" @click="$util.redirectTo('/otherpages/mall/cart')">
		  <image :src="$util.img('/image/cart.png')" mode=""></image>
		  <u-badge type="warning" max="99" :value="cartNum" bgColor="#FF5040" absolute :offset="offset"></u-badge>
		</view>
		<!-- 登录 -->
		<login-pop ref="loginDialog"></login-pop>
	</view>
</template>

<script>
	import goods from '../../components/goods/goods.vue'
	export default {
		components: {
			goods
		},
		data() {
			return {
				category_id: 0,
				goodsList: [],
				page: 1,
				cartNum: 0, //购物车数量
				offset: [4, 0],
				empty: {
					width: 135,
					height: 134,
					text: '暂无数据',
					icon: '/image/emptyAddress.png',
					marginTop: 100
				},
				is_recommend: 0,
			}
		},
		onLoad(e) {
			if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
			uni.setNavigationBarTitle({
				title: e.title
			})
			if(e.category_id) this.category_id = e.category_id;
			if(e.is_recommend) this.is_recommend = e.is_recommend;

			this.getGoodsList()
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.getCartNum()
			}
		},
		onReachBottom() {
		  this.page++
		  this.getGoodsList()
		},
		methods: {
			getCartNum() {
				this.$api.sendRequest({
				url: "/api/cart/count",
				data: {},
				success: res => {
					if(res.code == 0) {
					this.cartNum = res.data;
					}
				}
				})
			},
			getGoodsList() {
				this.$api.sendRequest({
					url: "/api/goodssku/page",
					data: {
						page: this.page,
						page_size: 30,
						category_id: this.category_id,
						is_recommend: this.is_recommend,

					},
					success: res => {
						if(res.code == 0) {
							if(this.page == 1) this.goodsList = []
			         		this.goodsList = [...this.goodsList, ...res.data.list]
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.cartBox {
  position: fixed;
  bottom: 20%;
  right: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 108rpx;
  height: 108rpx;
  border-radius: 78rpx;
  background: #FFF;
  z-index: 9;
  image {
    width: 88rpx;
    height: 88rpx;
  }
}
</style>
